<template>
	<el-popover v-model="isShow" width="300" trigger="click" class="item_select el-select">
		<div class="list_container">
			<div class="item" v-for="(i, index) of filterList" :key="i.id" @click="handleSelect(index)">
				<my-image type="items" :icon="i.iconUrl" :size="32" :lazy='index > 10'/>
				<p>{{ i.name }}</p>
			</div>
		</div>
		<div slot="reference" class="item_show el-input" @mouseover="isHover = true" @mouseleave="isHover = false">
			<my-image class="image" type="items" :icon="filterList[this.selIndex].iconUrl" :size="32"
				v-if="this.selIndex != null && this.selIndex >= 0"></my-image>
			<input readonly="readonly" class="text el-input__inner" :value="filterList[this.selIndex].name"
				v-if="this.selIndex != null && this.selIndex >= 0"></input>
			<el-input :readonly="!filter" v-model="searchName" @input="handleFilter" placeholder="未选择物品" v-else />
			<span class="el-input__suffix">
				<span class="el-input__suffix-inner">
					<i :class="'el-select__caret el-input__icon el-icon-arrow-up' + (isShow ? ' is-reverse':'')"
						v-show="!clearShow"></i>
					<i class='el-select__caret el-input__icon el-icon-circle-close' v-if="clearShow" @click.stop
						@click="handleClean"></i>
				</span>
			</span>
		</div>
	</el-popover>
</template>

<script>
	import Vue from "vue";
	import MyImage from "@/components/Image.vue";
	export default {
		name: "OneItemSelect",
		components: {
			MyImage
		},
		props: {
			// 传入物品id
			value: {
				type: Number || null,
			},
			// 候选物品列表
			itemList: {
				type: Array || null,
			},
			// 是否可删除
			clearable: {
				type: Boolean,
				default: false,
			},
			// 是否进行筛选
			filter: {
				type: Boolean,
				default: false,
			}
		},
		emits: ['input', 'change'],
		data() {
			return {
				searchName: null,
				filterList: null,
				selIndex: null,
				isShow: false,
				isHover: false,
			}
		},
		computed: {
			clearShow() {
				return (this.selIndex != null || this.searchName != null) && this.clearable && this.isHover;
			},
		},
		watch: {
			value: {
				handler() {
					if (this.value != null) {
						this.searchName = null;
						if (this.filterList == null) // 物品列表未设置
							this.selIndex = null;
						else this.renewIndex();
					}
				},
				immediate: true,
			},
			itemList: {
				handler() {
					if (this.itemList != null) {
						this.handleFilter();
						if (this.value == null) // 物品未设置
							this.selIndex = null;
						else this.renewIndex();
					}
				},
				immediate: true,
			}
		},
		methods: {
			// 选择物品
			handleSelect(index) {
				this.selIndex = index;
				this.$emit("input", this.filterList[index].id);
				this.$emit("change");
				this.isShow = false;
			},
			// 更新index
			renewIndex() {
				if (this.selIndex != null && this.filterList[this.selIndex].id == this.value) return; // 物品id和物品列表index对应
				this.selIndex = this.filterList.findIndex((i) => i.id == this.value);
				if (this.selIndex == -1) this.selIndex = null;
			},
			// 清除物品id
			handleClean() {
				this.$emit("input", null);
				this.selIndex = null;
				this.searchName = null;
				this.handleFilter();
			},
			handleFilter() {
				if (this.filter) console.log("过滤->搜索名:", this.searchName);
				if (!this.filter || this.searchName == null) this.filterList = this.itemList;
				else {
					this.filterList = this.itemList.filter((item) => {
						// 假设item对象中有一个name属性，用于搜索
						return item.name.toLowerCase().includes(this.searchName.toLowerCase().trim());
					});
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.item_select {
		width: 200px;
		height: 40px;
		display: inline-block;

		.item_show {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			position: relative;

			.image {
				position: absolute;
				z-index: 9;
				margin-left: 10px;
			}

			.text {
				position: relative;
				padding-left: 50px;
			}

			.select_icon {
				position: absolute;
				color: #C2C6CE;
				left: calc(100% - 30px);
				transition: transform .3s;
			}

			.select_icon.is-reverse {
				transform: rotate(180deg);
			}
		}
	}
</style>
<style lang="less">
	.list_container {
		width: 100%;
		max-height: 300px;
		overflow: auto;

		.item {
			display: flex;
			align-items: center;
			gap: 10px;

			&:hover {
				background-color: #F5F7FA;
			}
		}
	}
</style>